import React, { FC,Suspense } from "react";
import { Route, Switch, RouteProps,RouterProps } from "react-router";
// import layout from '../layout/layout'
import {Spin} from 'antd'
// import TodoList from '@pages/todo/index'
// import NotFound from "@components/NotFound";
const layout = React.lazy(() => import("../layout/layout"));
const TodoList = React.lazy(() => import("@pages/todo/index"));
const NotFound = React.lazy(() => import("@components/NotFound"));
const UploadDemo = React.lazy(() => import("@pages/uploadFileDemo/index"))

interface RouteMatchProps extends RouteProps {
    routes?: RouteProps[],
}

// 定义路由集合
export const routes: RouteMatchProps[] = [
  {
    path: "/",
    exact: true,
    component: layout,
    routes: [
        {
            path: "/todo",
            exact: true,
            component: TodoList,
        },
        {
            path: "/upload",
            exact: true,
            component: UploadDemo,
        }
    ]
  },
];

// 定义路由组件
const Routes:FC = ()=>{
    return (
        <Suspense fallback={<Spin size="large" />}>
            <Switch>
                {
                    routes.map((r,index)=>{
                        const {path,exact,component} = r;
                        const LazyCom:React.ComponentType<any> = component;
                        return (
                            <Route
                                key={index}
                                path={path}
                                // exact={exact}
                                render={
                                    (props)=><LazyCom {...props} routes={r.routes} />
                                }
                             />
                        )
                    })
                }
                {/* 兜底的路由 */}
                <Route component={NotFound} />
            </Switch>
        </Suspense>
    )
}

export default Routes;